/* 定义变量
在sass中定义变量是$变量名：变量值
定义混合
@mixin 混合名(){}
引用混合
@include 混合名（）；

*/
$zero:10px;

@mixin center($w:600px, $h:600px, $color:red) {
    width: $w;
    height: $h;
    background-color: $color;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* sass可以定函数
可以定义函数
@function 函数名（）{
    @return 返回值
}
函数名（）

*/
@function test($n) {
    // 逻辑操作
    @return 50px * $n;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wrap {

    @include center();

    .inner {
        @include center(400px, 400px, yellow);

        .box {
            @include center(200px, 200px, pink);
        }
    }
}

.box1 {
    width: test(3);
    height: 100px;
    background-color: #ccc;
}

/* sass写循环的方式有三种 */
/* 第一种 @for */
@for $i from 1 to 4 {
    .width#{$i} {
        width: $i * 20px;
    }
}

@for $i from 1 through 4 {
    .width#{$i} {
        width: $i * 20px;
    }
}

/* to和through的区别 to不包含end位置 through包含结束位置 */

/* @while */
$num:10;

@while $num < 15 {

    .ppp#{$num} {
        width: 10 * $num;
    }

    $num:$num+1;

}

/* @each */
$list: 2 4 6 8 10;

@each $index in $list {
    .xx#{$index} {
        height: 10px * $index;
    }
}

/* 父子元素嵌套，兄弟元素并列写 */